<template>
  <div class="mySysBox">
    <div class="myHeadSysList">
      <a-descriptions bordered size="small" :column="2">
        <a-descriptions-item label="参数名称"
          ><a-input v-model="cspzItem.csmc" placeholder="请输入参数名称" allow-clear></a-input>
        </a-descriptions-item>
        <a-descriptions-item label="参数值"
          ><a-input v-model="cspzItem.csz" placeholder="请输入参数值" allow-clear></a-input>
        </a-descriptions-item>
        <a-descriptions-item label="类型">
          <a-select v-model="cspzItem.lx" style="width: 100%" allowClear @change="zbzChange(cspzItem, 'newParamList')">
            <a-select-option v-for="el in dictLx" :key="el.key" :value="el.key">
              {{ el.title }}
            </a-select-option>
          </a-select>
        </a-descriptions-item>
        <a-descriptions-item label="备注"
          ><a-textarea v-model="cspzItem.bz" placeholder="请输入备注" allow-clear></a-textarea>
        </a-descriptions-item>
        <a-descriptions-item label="横纵坐标" :span="2">
          <a-row>
            <a-col :span="14">
              <span style="width: 60px; display: inline-block">
                {{
                  typeof cspzItem.lh === 'number' || (typeof cspzItem.lh === 'string' && cspzItem.lh !== '')
                    ? columnFilter(cspzItem.lh - 0)
                    : ''
                }}{{
                  typeof cspzItem.hh === 'number' || (typeof cspzItem.hh === 'string' && cspzItem.hh !== '') ? '/' : ''
                }}{{
                  typeof cspzItem.hh === 'number' || (typeof cspzItem.hh === 'string' && cspzItem.hh !== '')
                    ? cspzItem.hh - 0 + 1
                    : ''
                }}
              </span>
              <a-tooltip>
                <template slot="title">选中一个Excel空白单元格</template>
                <a-button
                  type="primary"
                  @click="setCoordinate(cspzItem, 'newParamList')"
                  :disabled="!(coordinate.r && coordinate.r >= 0)"
                  size="small"
                >
                  设置坐标
                </a-button>
              </a-tooltip>
              <a-popconfirm
                title="确定要删除吗？"
                @confirm="deleteCoordinate"
                :disabled="
                  !(typeof cspzItem.hh === 'number' || (typeof cspzItem.hh === 'string' && cspzItem.hh !== ''))
                "
              >
                <a-button
                  :disabled="
                    !(typeof cspzItem.hh === 'number' || (typeof cspzItem.hh === 'string' && cspzItem.hh !== ''))
                  "
                  size="small"
                  class="marginLeft"
                >
                  删除坐标
                </a-button>
              </a-popconfirm>
            </a-col>
            <a-col :span="10" :style="{ textAlign: 'right' }">
              <a-button v-show="(cspzItem && cspzItem.id && true) || false" size="small" @click="addParam">
                取 消
              </a-button>
              <a-button type="primary" @click="handleParam" size="small" class="marginLeft">
                {{ cspzItem.id ? '修 改' : '新 增' }}
              </a-button>
            </a-col>
          </a-row>
        </a-descriptions-item>
      </a-descriptions>
    </div>
    <div class="myHeadSys">
      <div class="myHeadSysList">
        <a-table
          size="small"
          :columns="paramColumns"
          :data-source="paramList"
          :rowKey="(record) => record.id"
          class="table-target"
        >
          <span slot="action" slot-scope="text, record">
            <a-popconfirm title="确定要删除吗？" @confirm="deleteCspz(record)">
              <a-button size="small"> 删除 </a-button>
            </a-popconfirm>
            <a-button
              type="primary"
              @click="editCspz(record)"
              size="small"
              class="marginLeft"
              :disabled="(cspzItem && cspzItem.id && true) || false"
            >
              修改
            </a-button>
          </span>
        </a-table>
      </div>
    </div>
  </div>
</template>

<script>
import { loadTreeData } from '@/api/websheet.js'
import { columnFilter } from '../export.js'

const paramColumns = [
  {
    title: '参数名称',
    dataIndex: 'csmc',
    ellipsis: true,
  },
  {
    title: '参数值',
    dataIndex: 'csz',
    ellipsis: true,
  },
  {
    title: '操作',
    dataIndex: 'action',
    ellipsis: true,
    scopedSlots: { customRender: 'action' },
  },
]
export default {
  name: 'FjcspzSys',
  props: {
    coordinate: {
      type: Object,
      required: false,
    },
    paramList: {
      type: Array,
      required: false,
    },
    bbdm: {
      type: String,
      required: false,
    },
    newParamList: {
      type: Array,
      required: false,
    },
  },
  data() {
    return {
      columnFilter,
      cspzItem: {}, //参数配置数据
      paramColumns,
      dictLx: [], //附加参数类型
    }
  },
  created() {
    loadTreeData({
      pid: '099db04d973b4685941baef1653ab181',
      tableName: 'RSPC_PARAM_CONFIG',
      text: 'name',
      code: 'code',
      pidField: 'pid',
      hasChildField: 'has_child',
      condition: '',
    }).then((res) => {
      if (res.success === true) {
        this.dictLx = res.result || []
      } else {
        this.$message.warning('获取报表参数类型失败!')
      }
    })
  },
  methods: {
    // 附加参数设置添加
    addParam() {
      this.cspzItem = {}
    },
    zbzChange(record, type) {
      this.$emit('zbzChange', record, type)
    },
    deleteCoordinate() {
      this.$emit('delCoordinate', this.cspzItem, 'newParamList')
    },
    // 设置坐标
    setCoordinate(record, listType) {
      if (
        this.coordinate.r &&
        this[listType].some((item) => item.hh === this.coordinate.r && item.lh === this.coordinate.c)
      ) {
        this.$message.warning('坐标已被使用')
        return
      }
      if (listType === 'persionList') {
        this[listType] = this[listType].map((item) => {
          if (listType === 'persionList' && record.bbjs === item.bbjs) {
            item.hh = this.coordinate.r
            item.lh = this.coordinate.c
          }
          return item
        })
      } else {
        this.cspzItem = { ...this.cspzItem, hh: this.coordinate.r, lh: this.coordinate.c }
      }
    },
    handleParam() {
      this.$emit('save', { bbdm: this.bbdm, ...this.cspzItem })
      this.cspzItem = {}
    },
    deleteCspz(record) {
      this.$emit('del', record)
      this.cspzItem = {}
    },
    //附加参数开始修改
    editCspz(record) {
      this.cspzItem = JSON.parse(JSON.stringify(record))
    },
  },
}
</script>
<style lang="less" scoped>
.mySysBox {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.myHeadSys {
  flex: auto;
  min-height: 200px;
  overflow-y: auto;
  &.myHeadSysHeight {
    min-height: auto;
  }
}
.myHeadSysList {
  padding: 8px 8px;
  border-radius: 2px;
  .ant-descriptions {
    box-shadow: 0 0 8px #0000002e;
    border-radius: 2px;
  }
}
.marginLeft {
  margin-left: 15px;
}
</style>